<template>
  <div class="register">
    <div class="register-page">
      <h2 align="center">用户注册</h2>
      <form @submit.prevent="submitForm">
        <div class="user">
          <label>用户名</label>
          <input type="text" v-model="susername" placeholder="请输入用户名">
          <p v-if="susernameError" style="color: red; text-align: center; margin-top: 5px;">
            {{ susernameError }}
          </p>
        </div>

        <div class="user">
          <label>密码</label>
          <input type="password" v-model="spassword" placeholder="请输入密码">
          <p v-if="spasswordError" style="color: red; text-align: center; margin-top: 5px;">
            {{ spasswordError }}
          </p>
        </div>

        <div class="user">
          <label>确认密码</label>
          <input type="password" v-model="spassword1" placeholder="请确认密码">
        </div>

        <div class="user">
          <label>姓名</label>
          <input type="text" v-model="sname" placeholder="请输入您的姓名">
          <p v-if="snameError" style="color: red; text-align: center; margin-top: 5px;">
            {{ snameError }}
          </p>
        </div>

        <div class="user">
          <label>电话</label>
          <input type="text" v-model="sphone" placeholder="请输入您的电话">
          <p v-if="sphoneError" style="color: red; text-align: center; margin-top: 5px;">
            {{ sphoneError }}
          </p>
        </div>
        <div class="user">
          <label>性别</label>
          <select id="sex" v-model="sgender">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>

        <div class="user">
          <label>学历</label>
          <select id="xueli" v-model="sedu">
            <option value="1">小学</option>
            <option value="2">初中</option>
            <option value="3">高中</option>
            <option value="4">大学</option>
            <option value="5">研究生</option>
            <option value="6">博士</option>
          </select>
        </div>

        <div class="user">
          <input type="submit" value="立即注册" id="bt">
          
        </div>
      </form>

      <div class="router">
        <ul>
          <router-link to="/login">已有账号 点击登录</router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        susername: '',
        susernameError: '',
        spassword: '',
        spasswordError: '',
        spassword1: '',
        sname: '',
        snameError: '',
        sphone: '',
        sphoneError: '',
        sgender: '',
        sedu: ''
      };
    },
    methods: {
      checkUsername(susername) {
        // 用户名至少6-10个字符,全为数字
        const regex = /^\d{6,10}$/;
        return regex.test(susername);
      },
      checkPassword(spassword) {
        // 密码至少6-10个字符
        const regex = /^[a-zA-Z\d]{6,10}$/;
        return regex.test(spassword);
      },
      checkName(sname) {
        // 名字只能为汉字
        const regex = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
        return regex.test(sname);
      },
      checkPhone(sphone) {
        // 电话只能是数字
        const regex = /^\d{11}$/;
        return regex.test(sphone);
      },
      submitForm() {
        this.susernameError = '';
        this.spasswordError = '';
        this.snameError = '';
        this.sphoneError = '';

        if (!this.checkUsername(this.susername)) {
          this.susernameError = '用户名不符合要求';
        }

        if (!this.checkPassword(this.spassword)) {
          this.spasswordError = '密码不符合要求';
        }

        if (!this.checkName(this.sname)) {
          this.snameError = '姓名不符合要求';
        }

        if (!this.checkPhone(this.sphone)) {
          this.sphoneError = '电话不符合要求';
          return;
        }

        if (this.spassword1 !== this.spassword) {
          alert('请确保密码输入一致');
          return;
        }

        // 检查所有错误信息是否为空
        const errors = [this.susernameError, this.spasswordError, this.snameError, this.sphoneError];
        const hasErrors = errors.some(error => error);

        if (hasErrors) {
          // 如果存在错误，则不继续提交表单
          return;
        }

        // 使用axios发送POST请求
        let data = new FormData();
        data.append("susername", this.susername);
        data.append("spassword", this.spassword);
        data.append("sname", this.sname);
        data.append("sphone", this.sphone);
        data.append("sgender", this.sgender);
        data.append("sedu", this.sedu);

        axios.post('http://localhost:8080/hqdx/seeker/register', data)
          .then(response => {
            alert("注册成功");
            this.$router.push('/login');
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  }
</script>

<style>
  .register {
    border: rgb(255, 255, 255) solid 1px;
    height: 1000px;
    background-image: url('/public/image/登录页面背景.png');
    background-size: 100% 100%;
  }

  .register-page {
    opacity: 0.85;
    width: 500px;
    height: 620px;
    border: white solid 1px;
    background-color: rgb(247, 243, 243);
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .user {
    margin-top: 7%;
  }

  .user label {
    display: block;
    float: left;
    width: 30%;
  }

  .user input {
    display: block;
    width: 55%;
    height: 25px;
    background-color: white;
    border: rgb(233, 230, 230);
  }

  .user select {
    display: block;
    width: 20%;
    height: 25px;
    background-color: white;
    border: rgb(233, 230, 230);
  }

  #bt {
    display: flex;
    margin: 0 auto;
    width: 150px;
    height: 50px;
    background-color: white;
    color: rgb(17, 174, 168);
    font-size: 16px;
    border: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  #bt:hover {
    background-color: #aababa;
  }
  .router{
    float:right;
  }
</style>

  
  